.box{
    #theNavbar{
        background-color: #111111;
        // padding-top: 45px;
        border: 0;
        border-radius: 0;
        margin-bottom: 0;
        .navbar-header{
            // padding-right: 15px;
            .navbar-toggle{
                // margin-right: 0;
                &:hover{
                    background-color: inherit;
                }
                .icon-bar{
                    background-color: #fff;
                }
            }
            &>a{
                color: #fff;
                font-size: 18px;
            }
        }
        .navbar-collapse{
            .navbar-nav{
                .navActive{
                    border-bottom: 3px solid #909090; 
                }
                &>li{
                    height: 50px;
                    box-sizing: border-box;
                    &:hover{
                        border-bottom: 3px solid #909090; 
                    }
                    &>a{
                        text-align: center;
                        color: #fff;
                        font-size: 10px;
                        font-family: Arial, Helvetica, sans-serif;
                    }
                }
            }
        }
    }
    #theBanner{
        background-color: #111111;
        padding-bottom: 89px;
        .bannerBox{
            &>p{
                display: flex;
                justify-content: center;
            }
            .title{
                font-size: 32px;
                line-height: 53px;
                color: #999999;
                margin-top: 192px;
                flex-wrap: wrap;
                &>span{
                    text-align: center;
                }
                .hasColor{
                    color: #fcac45;
                }
            }
            .text{
                font-size: 17px;
                color: #c3c3c3;
                line-height: 41px;
                margin-bottom: 270px;
                flex-wrap: wrap;
                &>span{
                    text-align: center;
                }
                .blodFont{
                    font-weight: bold;
                }
                @media screen and(max-width:575px) {
                    margin-bottom: 229px;
                }
                @media screen and(max-width:362px) {
                    margin-bottom: 188px;
                }
            }
            .narrowBox{
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 46px;
                height: 46px;
                border: 3px solid #c0c0c0;
                border-radius: 50%;
                cursor: pointer;
                &:hover{
                    background-color: #909090;
                }
            }
        }
    }
    #theMac{
        background-color: #fff;
        .container{
            .hasShadow{
                background-image: url(../images/shadow.png);
                background-repeat: no-repeat;
                background-position:0 103px;
                padding-bottom: 100px;
                @media screen and (max-width:1201px) {
                    background-position: 88% 17%;
                }
                @media screen and (max-width:992px) {
                    background-position: 283% 17%;
                }
                @media screen and (max-width:768px) {
                    background-position: 215% 17%;
                    background-size: 50%;
                    background-image: none;
                }
                .theLeft{
                    margin-top: 103px;
                    padding-left: 0;
                    padding-right: 0;
                    @media screen and (max-width:1201px) {
                        width: 100%;
                        &>img{
                            display: block;
                            margin: 0 auto;
                        }
                    }
                    &>img{
                        @media screen and (max-width:632.5px) {
                            width: 80%;
                        }
                    }
                }
                .theRight{
                    @media screen and (max-width:1201px) {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
                    .about{
                        font-size: 14px;
                        color: #636363;
                        line-height: 36px;
                        margin-top: 90px;
                    }
                    .title{  
                        padding-bottom: 16px;
                        position: relative;
                        @media screen and(max-width:344px) {
                            text-align: center;
                            &::before{
                                content: '';
                                position: absolute;
                                width: 98px;
                                height: 4px;
                                background-color: #fcac45;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                        }
                        &::before{
                            content: '';
                            position: absolute;
                            width: 98px;
                            height: 4px;
                            background-color: #fcac45;
                            bottom: 0;
                        }
                        &>span{
                            line-height: 42px;
                            color: #222;
                            font-size: 24px;
                            font-family: Arial, Helvetica, sans-serif;
                            font-weight: 600;
                        }
                        .blodFont{
                            font-weight: 800;
                        }
                    }
                    .text{
                        margin-top: 28px;
                        line-height: 24px;
                        color: #6c6c6c;
                        font-size: 14px;
                        max-width: 65%;
                        font-family:Arial, Helvetica, sans-serif;
                        @media screen and (max-width:1201px) {
                            text-align: center;
                        }
                    }
                    &>ul{
                        margin-top: 31px;
                        &>li{
                            font-size: 14px;
                            color: #5a5a5a;
                            font-family: Arial, Helvetica, sans-serif;
                            padding-left: 25px;
                            line-height: 34px;
                            position: relative;
                            &::before{
                                content: '';
                                position: absolute;
                                width: 14px;
                                height: 15px;
                                background-image: url(../images/spot.png);
                                left: 0;
                                top: 0;
                                bottom: 0;
                                margin-top: 10px;
                            }
                            &>span{
                                font-style: italic;
                                font-size: 12px;
                            }
                        }
                    }
                    &>div{
                        cursor: pointer;
                        width: 192px;
                        height: 45px;
                        border: 1px solid #7f7f7f;
                        margin-top: 43px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 22px;
                        border-radius: 2px;
                        &>span{
                            font-size: 9px;
                            color: #767676;
                            font-family: Arial, Helvetica, sans-serif;
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
    }
    #theTeam{
        background-color: #070707;
        padding-top: 100px;
        padding-bottom: 84px;
        .carousel{
            padding-bottom: 75px;
            .indicators{
                bottom: 0 ;
                .active{
                    margin:1px;
                }
                .spot{
                    border: 0;
                    width: 9px;
                    height: 9px;
                    background-color: #fff;
                    border-radius: 0;
                }
                .isActive{
                    background-color: #fcac45;
                }
            }
            .carousel-inner{         
                .item{
                    .itemContainer{
                        text-align: center;
                        &>p{
                            padding-bottom: 49px;
                            margin-bottom: 93px;
                            position: relative;
                            &::before{
                                position: absolute;
                                content: '';
                                width: 98px;
                                height: 4px;
                                background-color: #fcac45;
                                bottom: 14px;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                            &::after{
                                position: absolute;
                                content: '';
                                width: 66px;
                                height: 4px;
                                background-color: #b37b33;
                                bottom: 0px;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                            &>span{
                                display: inline-block;
                                line-height: 32px;
                                font-size: 32px;
                                color: #fff;
                                font-family: Arial, Helvetica, sans-serif;
                                &:nth-of-type(2){
                                    font-weight: bold;
                                }
                            }
                        }
                        .row{
                            .userInfo{
                                overflow: hidden;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                @media screen and (max-width:767px) {
                                    margin-top: 20px;
                                    &:nth-of-type(1){
                                        margin-top: 0px;
                                    }
                                    &:nth-of-type(2){
                                        margin-top: 0px;
                                    }
                                }
                                @media screen and(max-width:450px) {
                                    width: 100%;
                                    &:nth-of-type(2){
                                        margin-top: 20px;
                                    }
                                }
                                .imgBox{
                                    width: 127px;
                                    height: 127px;
                                    border-radius: 50%;
                                    background-color: #d7d7d7;
                                    overflow: hidden;
                                    margin: 0 auto;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    margin-bottom: 18px;
                                    cursor: pointer;
                                    &>img{
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                                &>p{
                                    color: #fff;
                                }
                                .name{
                                    line-height: 26px;
                                    font-size: 18px;
                                }
                                .signature{
                                    font-size: 13px;
                                    line-height: 23px;
                                }
                                .text{
                                    margin-top: 27px;
                                    line-height: 24px;
                                    font-size: 11px;
                                    max-width: 246px;
                                }
                            }
                        }
                    }
                }
            }  
        }
    }
    #theService{
        padding-top: 100px;
        padding-bottom: 95px;
        background-color: #ffffff;
        .itemContainer{
            .title{
                text-align: center;
                padding-bottom: 49px;
                margin-bottom: 37px;
                position: relative;
                &::before{
                    position: absolute;
                    content: '';
                    width: 98px;
                    height: 4px;
                    background-color: #fcac45;
                    bottom: 14px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                &::after{
                    position: absolute;
                    content: '';
                    width: 66px;
                    height: 4px;
                    background-color: #fdc57c;
                    bottom: 0px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                &>span{
                    display: inline-block;
                    line-height: 32px;
                    font-size: 32px;
                    color: #222222;
                    font-family: Arial, Helvetica, sans-serif;
                    font-weight: 300;
                    &:nth-of-type(2){
                        font-weight: bold;
                    }
                }  
            }
            &>.text{
                margin-top: 37px;
                line-height: 23px;
                text-align: center;
                font-size: 12px;
                color: #6c6c6c;
            }
            .row{
                margin-top: 123px;
                .serviceInfo{
                    text-align: center;
                    @media screen and (max-width:767px) {
                        margin-top: 20px;
                        &:nth-of-type(1){
                            margin-top: 0px;
                        }
                        &:nth-of-type(2){
                            margin-top: 0px;
                        }
                    }
                    @media screen and(max-width:280px) {
                        width: 100%;
                        &:nth-of-type(2){
                            margin-top: 20px;
                        }
                    }
                    .imgBox{
                        margin: 0 auto;
                        width: 112px;
                        height: 112px;
                        border-radius: 50%;
                        border: 6px solid #fcac45;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 13px;
                    }
                    .name{
                        font-size: 18px;
                        line-height: 52px;
                        color: #222222;
                        font-family: Arial, Helvetica, sans-serif;
                        font-weight: 600;
                    }
                    .text{
                        margin: 0 auto;
                        font-size: 11px;
                        line-height: 18px;
                        color: #222;
                        max-width: 80%;
                    }
                }
            }
        }
    }
    #theClients{
        background-color: #0b0b0b;
        padding: 100px 0;
        .carousel{
            padding-bottom: 100px;
            .indicators{
                bottom: 0 ;
                .active{
                    margin:1px;
                }
                .spot{
                    border: 0;
                    width: 9px;
                    height: 9px;
                    background-color: #fff;
                    border-radius: 0;
                }
                .isActive{
                    background-color: #fcac45;
                }
            }
            .carousel-inner{
                .item{
                    .itemContainer{
                        &>p{
                            text-align: center;
                            padding-bottom: 49px;
                            margin-bottom: 98px;
                            position: relative;
                            &::before{
                                position: absolute;
                                content: '';
                                width: 98px;
                                height: 4px;
                                background-color: #fcac45;
                                bottom: 14px;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                            &::after{
                                position: absolute;
                                content: '';
                                width: 66px;
                                height: 4px;
                                background-color: #fdc57c;
                                bottom: 0px;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                            &>span{
                                display: inline-block;
                                line-height: 32px;
                                font-size: 32px;
                                color: #fff;
                                font-family: Arial, Helvetica, sans-serif;
                                font-weight: 300;
                                &:nth-of-type(2){
                                    font-weight: bold;
                                }
                            }  
                        }
                        .row{
                            .clientInfo{
                                .imgBox{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    &>img{
                                        @media screen and(max-width:1181px) {
                                            width: 80%;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    #theWork{
        padding: 100px 0;
        .itemContainer{
            .title{
                text-align: center;
                padding-bottom: 49px;
                margin-bottom: 37px;
                position: relative;
                &::before{
                    position: absolute;
                    content: '';
                    width: 98px;
                    height: 4px;
                    background-color: #fcac45;
                    bottom: 14px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                &::after{
                    position: absolute;
                    content: '';
                    width: 66px;
                    height: 4px;
                    background-color: #fdc57c;
                    bottom: 0px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                &>span{
                    display: inline-block;
                    line-height: 32px;
                    font-size: 32px;
                    color: #222222;
                    font-family: Arial, Helvetica, sans-serif;
                    font-weight: 300;
                    &:nth-of-type(2){
                        font-weight: bold;
                    }
                }  
            }
            &>.text{
                margin-bottom: 102px;
                line-height: 23px;
                text-align: center;
                font-size: 12px;
                color: #6c6c6c;
                font-style: italic;
                font-family: Arial, Helvetica, sans-serif;
            }
            .row{
                .PhotoNav{
                    margin-bottom: 40px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    @media screen and(max-width:452px) {
                            flex-wrap: wrap;
                            justify-content: center;
                    }
                    &>p{
                        line-height: 32px;
                        font-weight: 13px;
                        color: #222;
                        font-family: Arial, Helvetica, sans-serif;
                    }
                    .breadcrumb{
                        background-color: inherit;
                        margin-bottom: 0;
                        padding-right: 0;
                        .isActive{
                            &>a{
                                color: #222;
                            }
                        }
                        &>li+li:before{
                            content: '|';
                            color: #6c6c6c;
                        }
                        &>li{
                            text-align: end;
                            @media screen and (max-width:280px) {
                                &:nth-last-of-type(1){
                                    margin-top: 10px;
                                    &::before{
                                        content: '';
                                        padding: 0;
                                    }
                                }
                            }
                            &>a{
                                text-align: end;
                                font-size: 13px;
                                font-family: Arial, Helvetica, sans-serif;
                                color: #6c6c6c;
                            }
                        }
                    }
                }
              
            }
            .itemList{
                margin-top: 30px;
                @media screen and(max-width:992px) {
                    margin-top: 30px;
                    &:nth-of-type(1){
                        margin-top: 0;
                    }
                    &:nth-of-type(2){
                        margin-top: 0;
                    }
                }
                .item{
                    position: relative;
                    @media screen and(max-width:992px) {
                        margin-top: 30px;
                        &:nth-of-type(1){
                            margin-top: 0;
                        }
                        &:nth-of-type(2){
                            margin-top: 0;
                        }
                    }
                    &:hover{
                        .mask{
                            display: block;
                            animation: theMask .5s linear;
                            @keyframes theMask {
                                from{
                                    opacity: 0;
                                }
                                to{
                                    opacity: 1;
                                }
                            }
                        }
                    }
                    &>img{
                        width: 100%;
                        display: block;
                    }
                    .mask{
                        display: none;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                        padding: 0 15px;
                        position: absolute;
                        &>div{
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            background-color: #222222;
                            height: 100%;
                            &>p{
                                text-align: center;
                                &:nth-of-type(1){
                                    font-size: 14px;
                                    color: #fff;
                                    line-height: 28px;
                                    margin-top: 60px; 
                                    @media screen and(max-width:485px) {
                                        margin-top: 30px;
                                    }
                                    @media screen and(max-width:346px) {
                                        margin-top: 10px;
                                        font-size: 10px;
                                    }
                                    @media screen and(max-width:280px) {
                                        margin-top: 10px;
                                        font-size: 10px;
                                    }
                                    @media screen and(max-width:264px) {
                                        line-height: normal;
                                    }
                                }
                                &:nth-of-type(2){
                                    font-size: 12px;
                                    color: #8e8e8e;
                                    line-height: 27px;
                                    margin-bottom: 22px;
                                    @media screen and(max-width:485px) {
                                        margin-bottom: 11px;
                                        
                                    }
                                    @media screen and(max-width:280px) {
                                        margin-bottom: 5px;
                                        font-size: 8px;
                                    }
                                    @media screen and(max-width:264px) {
                                        line-height: normal;
                                    }
                                }
                            }
                            &>img{
                                cursor: pointer;
                                border-radius: 50%;
                                overflow: hidden;
                                &:hover{
                                    background-color: rgba(137,99,50,.5);
                                }
                                @media screen and(max-width:360px) {
                                    width: 20px;
                                    height: 20px;
                                }
                                @media screen and(max-width:280px) {
                                    width: 10px;
                                    height: 10px;
                                }
                            }
                        }
                        
                    }
                }
            }
        }
    }
    #theTestimonials{
        background-color: #0b0b0b;
        padding: 100px 0;
        .carousel{
            padding-bottom: 70px;
            .indicators{
                bottom: 0 ;
                .active{
                    margin:1px;
                }
                .spot{
                    border: 0;
                    width: 9px;
                    height: 9px;
                    background-color: #fff;
                    border-radius: 0;
                }
                .isActive{
                    background-color: #fcac45;
                }
            }
            .carousel-inner{
                .item{
                    .itemContainer{
                        &>p{
                            text-align: center;
                            padding-bottom: 49px;
                            margin-bottom: 98px;
                            position: relative;
                            &::before{
                                position: absolute;
                                content: '';
                                width: 98px;
                                height: 4px;
                                background-color: #fcac45;
                                bottom: 14px;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                            &::after{
                                position: absolute;
                                content: '';
                                width: 66px;
                                height: 4px;
                                background-color: #fdc57c;
                                bottom: 0px;
                                left: 0;
                                right: 0;
                                margin: 0 auto;
                            }
                            &>span{
                                display: inline-block;
                                line-height: 32px;
                                font-size: 32px;
                                color: #fff;
                                font-family: Arial, Helvetica, sans-serif;
                                font-weight: 300;
                                &:nth-of-type(2){
                                    font-weight: bold;
                                }
                            }  
                        }
                        .row{
                            margin-top: 100px;
                            .testimonialsInfo{
                                display: flex;
                                align-items: center;
                                flex-direction: column;
                                &>p{
                                    text-align: center;
                                    &:nth-of-type(1){
                                        font-size: 13px;
                                        color: #e8e8e8;
                                        line-height: 23px;
                                    }
                                    &:nth-of-type(2){
                                        display: flex;
                                        text-align: start;
                                        margin-top: 43px;
                                        &>span{
                                            font-size: 13px;
                                            line-height: 23px;
                                            color: #b2b2b2;
                                            &:nth-of-type(1){
                                                font-weight: bold;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    #theContact{
        padding: 100px 0;
        .itemContainer{
            .title{
                text-align: center;
                padding-bottom: 49px;
                margin-bottom: 37px;
                position: relative;
                &::before{
                    position: absolute;
                    content: '';
                    width: 98px;
                    height: 4px;
                    background-color: #fcac45;
                    bottom: 14px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                &::after{
                    position: absolute;
                    content: '';
                    width: 66px;
                    height: 4px;
                    background-color: #fdc57c;
                    bottom: 0px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
                &>span{
                    display: inline-block;
                    line-height: 32px;
                    font-size: 32px;
                    color: #222222;
                    font-family: Arial, Helvetica, sans-serif;
                    font-weight: 300;
                    &:nth-of-type(2){
                        font-weight: bold;
                    }
                }  
            }
            .row{
                .col-md-8{
                    &>.text{
                        text-align: center;
                        margin: 0 auto;
                        max-width: 750px;
                        line-height: 23px;
                        text-align: center;
                        font-size: 12px;
                        color: #6c6c6c;
                        font-style: italic;
                        font-family: Arial, Helvetica, sans-serif;
                    }
                }
            }
            .inputList{
                margin-top: 80px;
                .col-md-8{
                    .row{
                        display: flex;
                        .col-md-6{
                            &>p{
                                white-space: nowrap;
                                &>span{
                                    line-height: 31px;
                                    font-size: 10px;
                                    &:nth-of-type(1){
                                        color: #636363;
                                    }
                                    &:nth-of-type(2){
                                        color: #e02222;
                                    }
                                }
                            }
                            .inputBox{
                                border: 1px solid #999999;
                                &>input{
                                    border: 0;
                                    outline: none;
                                    display: block;
                                    appearance: none;
                                    width: 100%;
                                    height: 30px;

                                }
                            }
                        }
                        .col-md-12{
                            margin-top: 20px;
                            &>p{
                                &>span{
                                    line-height: 31px;
                                    font-size: 10px;
                                    &:nth-of-type(1){
                                        color: #636363;
                                    }
                                    &:nth-of-type(2){
                                        color: #e02222;
                                    }
                                }
                            }
                            .inputBox{
                                &>textarea{
                                    outline: none;
                                    resize: none;
                                    height: 163px;
                                    border: 1px solid #999999;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
            .sendButton{
                margin-top: 31px;
                background-color: #fcac45;
                width: 165px;
                height: 40px;
                float: right;
                &>input{
                    display: block;
                    width: 100%;
                    height: 100%;
                    border: none;
                    background-color: transparent;
                    color: #fff;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 12px;
                }
            }
        }
    }
    footer{
        background-color: #222222;
        display: flex;
        align-items: center;
        padding: 30px 0;
        .container{
            .content{
                display: flex;
                justify-content: space-between;
                align-items: center;
                @media screen and(max-width:768px) {
                    flex-wrap: wrap;
                    &>address{
                        width: 100%;
                        text-align: center;
                    }
                    .logoList{
                        width: 100%;
                        justify-content: center;
                        margin-top: 20px;
                    }
                }
                &>address{
                    font-size: 9px;
                    color: #b2b2b2;
                    font-family: Arial, Helvetica, sans-serif;
                }
                .logoList{
                    display: flex;
                    &>img{
                        cursor: pointer;
                        margin: 0 7px;
                    }
                }
            }
           
        }
    }
}